// 推荐根据项目大小和难度调整 webpack.config.js 的配置文件（保存在一个或者其它三个）

const path = require("path");

// 引入插件
const HtmlWebpackPlugin = require("html-webpack-plugin"); // 根据一个html模板在内存中生成一个相同的 html，把内存中的打包好的 js 插入到内存中 Html 最后面
const { CleanWebpackPlugin } = require("clean-webpack-plugin"); // 把之前老的打包好的模块删除掉，仅仅留下最新打包的。

module.exports = {
  // 入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。
  // entry: { index: "./src/index.js" },
  // output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  // loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）
  // test 属性，用于标识出应该被对应的 loader 进行转换的某个或某些文件
  // use 属性，表示进行转换时，应该使用哪个 loader
  module: {
    rules: [
      // TIPS 正则匹配以 .css 结尾的全部文件，都将被提供给 style-loader 和 css-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },

      // TIPS 正则匹配以下面图片格式结尾的全部文件，都将被提供给 file-loader
      {
        test: /\.(png|svg|jpg|gif)$/,
        loader: "file-loader",
        options: { outputPath: "imgs" },
      },

      // TIPS 正则匹配以下面字体格式结尾的全部文件，都将被提供给 file-loader
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        loader: "file-loader",
        options: { outputPath: "imgs" },
      },
    ],
  },

  // loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务
  // 插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量
  // 想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],

  // 通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化
  //  mode: 'production' or  mode: 'development'

  devtool: "inline-source-map",

  // devServer: {
  //   contentBase: "./dist",
  // },
};

// process.env.NODE_ENV 检测代码运行环境
